
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能点名系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#8B5CF6',
                        accent: '#F59E0B',
                        success: '#10B981',
                        warning: '#F59E0B',
                        danger: '#EF4444',
                        info: '#06B6D4',
                    }
                }
            }
        }
    </script>
    
    <style>
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        @keyframes bounce-slow {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        @keyframes glow {
            from { box-shadow: 0 0 20px #3B82F6; }
            to { box-shadow: 0 0 30px #3B82F6, 0 0 40px #3B82F6; }
        }
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }
        .animate-bounce-slow {
            animation: bounce-slow 2s infinite;
        }
        .animate-glow {
            animation: glow 2s ease-in-out infinite alternate;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .modal-backdrop {
            backdrop-filter: blur(8px);
        }
        .btn-hover {
            transition: all 0.2s ease;
        }
        .btn-hover:hover {
            transform: translateY(-2px);
        }
        .btn-hover:active {
            transform: translateY(0);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 via-white to-purple-50 min-h-screen font-sans">
    <div id="app">
        <!-- 顶部导航 -->
        <header class="bg-white rounded-2xl shadow-xl p-6 mb-8 card-hover">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2" id="title">机械工程学院 机自25-5BF</h1>
                    <p class="text-lg text-gray-600" id="subtitle">2024-2025学年第一学期</p>
                </div>
                <div class="flex items-center gap-4">
                    <div class="text-right">
                        <p class="text-sm text-gray-500">当前时间</p>
                        <p class="text-lg font-semibold text-gray-700" id="currentTime"></p>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="container mx-auto px-4 py-8 max-w-7xl grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- 左侧控制面板 -->
            <div class="lg:col-span-1 space-y-6">
                <!-- 数据集选择 -->
                <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                        <i class="fa fa-users mr-3 text-primary"></i>
                        选择点名班级/课程
                    </h3>
                    <div class="space-y-4">
                        <select id="datasetSelect" onchange="switchDataset()" 
                                class="w-full p-3 border-2 border-gray-200 rounded-xl focus:border-primary focus:outline-none transition-colors">
                            <option value="default">机械工程学院 机自25-5BF</option>
                        </select>
                        <button onclick="showManagementModal()" 
                                class="w-full bg-gradient-to-r from-primary to-secondary text-white py-3 px-4 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105 btn-hover">
                            <i class="fa fa-cog mr-2"></i>管理
                        </button>
                    </div>
                </div>

                <!-- 快速操作 -->
                <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                        <i class="fa fa-bolt mr-3 text-accent"></i>
                        快速操作
                    </h3>
                    <div class="space-y-3">
                        <button onclick="showRandomModal()" 
                                class="w-full bg-gradient-to-r from-accent to-warning text-white py-3 px-4 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105 btn-hover">
                            <i class="fa fa-random mr-2"></i>随机点名/分组
                        </button>
                        <button onclick="showSummaryModal()" 
                                class="w-full bg-gradient-to-r from-success to-emerald-600 text-white py-3 px-4 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105 btn-hover">
                            <i class="fa fa-bar-chart mr-2"></i>查看汇总
                        </button>
                        <button onclick="showAddStudentModal()" 
                                class="w-full bg-gradient-to-r from-info to-cyan-600 text-white py-3 px-4 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105 btn-hover">
                            <i class="fa fa-plus mr-2"></i>添加学生
                        </button>
                    </div>
                </div>
            </div>

            <!-- 右侧学生列表 -->
            <div class="lg:col-span-3 space-y-6">
                <!-- 点名统计 -->
                <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
                        <i class="fa fa-chart-pie mr-3 text-primary"></i>
                        点名统计
                    </h3>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="text-center p-4 bg-blue-50 rounded-xl">
                            <div class="text-3xl font-bold text-blue-600" id="totalCount">34</div>
                            <div class="text-sm text-blue-600 mt-1">应到人数</div>
                        </div>
                        <div class="text-center p-4 bg-green-50 rounded-xl">
                            <div class="text-3xl font-bold text-green-600" id="presentCount">0</div>
                            <div class="text-sm text-green-600 mt-1">实到人数</div>
                        </div>
                        <div class="text-center p-4 bg-red-50 rounded-xl">
                            <div class="text-3xl font-bold text-red-600" id="absentCount">34</div>
                            <div class="text-sm text-red-600 mt-1">缺勤人数</div>
                        </div>
                        <div class="text-center p-4 bg-purple-50 rounded-xl">
                            <div class="text-3xl font-bold text-purple-600" id="attendanceRate">0.0%</div>
                            <div class="text-sm text-purple-600 mt-1">出勤率</div>
                        </div>
                    </div>
                </div>

                <!-- 学生点名列表 -->
                <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
                        <h3 class="text-xl font-semibold text-gray-800 flex items-center">
                            <i class="fa fa-list mr-3 text-primary"></i>
                            学生点名列表
                        </h3>
                        <div class="flex items-center gap-3">
                            <!-- 筛选按钮 -->
                            <div class="flex flex-wrap gap-2">
                                <button onclick="setFilter('all')" id="filterAll"
                                        class="py-2 px-3 rounded-lg font-medium transition-colors bg-primary text-white btn-hover">
                                    全部学生
                                </button>
                                <button onclick="setFilter('present')" id="filterPresent"
                                        class="py-2 px-3 rounded-lg font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200 btn-hover">
                                    已到学生
                                </button>
                                <button onclick="setFilter('absent')" id="filterAbsent"
                                        class="py-2 px-3 rounded-lg font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200 btn-hover">
                                    未到学生
                                </button>
                            </div>
                            <button onclick="exportCSV()" 
                                    class="bg-gradient-to-r from-green-600 to-teal-600 text-white py-2 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover">
                                <i class="fa fa-download mr-2"></i>导出
                            </button>
                        </div>
                    </div>
                    
                    <div id="studentList" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 max-h-96 overflow-y-auto pr-2" 
                         style="scrollbar-width: thin; scrollbar-color: #3B82F6 #F3F4F6;">
                        <!-- 学生卡片将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 管理模态框 -->
    <div id="managementModal" class="fixed inset-0 bg-black bg-opacity-50 modal-backdrop flex items-center justify-center z-50 p-4 hidden">
        <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <!-- 模态框头部 -->
            <div class="bg-gradient-to-r from-primary to-secondary text-white p-6 rounded-t-2xl flex justify-between items-center sticky top-0 z-10">
                <h2 class="text-2xl font-bold flex items-center">
                    <i class="fa fa-cogs mr-3"></i>系统管理中心
                </h2>
                <button onclick="hideManagementModal()" class="text-white hover:text-gray-200 transition-colors text-2xl btn-hover">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <!-- 模态框内容 -->
            <div class="p-6">
                <div class="flex flex-wrap border-b mb-6">
                    <button onclick="setActiveTab('dataset')" id="tabDataset"
                            class="px-6 py-3 border-b-2 font-semibold transition-colors border-primary text-primary btn-hover">
                        数据集管理
                    </button>
                    <button onclick="setActiveTab('import')" id="tabImport"
                            class="px-6 py-3 border-b-2 font-semibold transition-colors border-gray-300 text-gray-600 btn-hover">
                        导入导出
                    </button>
                    <button onclick="setActiveTab('students')" id="tabStudents"
                            class="px-6 py-3 border-b-2 font-semibold transition-colors border-gray-300 text-gray-600 btn-hover">
                        学生管理
                    </button>
                </div>

                <!-- 数据集管理 -->
                <div id="contentDataset" class="space-y-6">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <!-- 数据集列表 -->
                        <div class="bg-blue-50 rounded-xl p-6">
                            <h3 class="text-lg font-semibold text-blue-800 mb-4 flex items-center">
                                <i class="fa fa-database mr-2"></i>我的数据集
                            </h3>
                            <div id="datasetList" class="space-y-3 max-h-64 overflow-y-auto">
                                <!-- 数据集列表将通过JavaScript动态生成 -->
                            </div>
                        </div>

                        <!-- 创建新数据集 -->
                        <div class="bg-green-50 rounded-xl p-6">
                            <h3 class="text-lg font-semibold text-green-800 mb-4 flex items-center">
                                <i class="fa fa-plus-circle mr-2"></i>创建新数据集
                            </h3>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-green-800 mb-2">点名标题</label>
                                    <input type="text" id="newDatasetTitle" placeholder="例如：机自25-5班或高等数学课程"
                                           class="w-full p-3 border border-green-200 rounded-lg focus:border-green-500 focus:outline-none">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-green-800 mb-2">点名类型</label>
                                    <select id="newDatasetScene" onchange="updateDatasetForm()"
                                            class="w-full p-3 border border-green-200 rounded-lg focus:border-green-500 focus:outline-none">
                                        <option value="class">班级点名</option>
                                        <option value="course">课程点名</option>
                                    </select>
                                </div>
                                <div id="classFields">
                                    <div>
                                        <label class="block text-sm font-medium text-green-800 mb-2">学院</label>
                                        <input type="text" id="newDatasetCollege" placeholder="例如：机械工程学院"
                                               class="w-full p-3 border border-green-200 rounded-lg focus:border-green-500 focus:outline-none">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-green-800 mb-2">班级</label>
                                        <input type="text" id="newDatasetClass" placeholder="例如：机自25-5班"
                                               class="w-full p-3 border border-green-200 rounded-lg focus:border-green-500 focus:outline-none">
                                    </div>
                                </div>
                                <div id="courseFields" class="hidden">
                                    <div>
                                        <label class="block text-sm font-medium text-green-800 mb-2">学期</label>
                                        <input type="text" id="newDatasetTerm" placeholder="例如：2024-2025学年第一学期"
                                               class="w-full p-3 border border-green-200 rounded-lg focus:border-green-500 focus:outline-none">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-green-800 mb-2">课程</label>
                                        <input type="text" id="newDatasetCourse" placeholder="例如：高等数学"
                                               class="w-full p-3 border border-green-200 rounded-lg focus:border-green-500 focus:outline-none">
                                    </div>
                                </div>
                                <button onclick="createNewDataset()" 
                                        class="w-full bg-gradient-to-r from-green-500 to-emerald-600 text-white py-3 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover">
                                    <i class="fa fa-save mr-2"></i>创建数据集
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 当前数据集操作 -->
                    <div class="bg-yellow-50 rounded-xl p-6">
                        <h3 class="text-lg font-semibold text-yellow-800 mb-4 flex items-center">
                            <i class="fa fa-cog mr-2"></i>当前数据集操作
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <button onclick="duplicateCurrentDataset()" 
                                    class="bg-gradient-to-r from-yellow-500 to-orange-500 text-white py-3 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover">
                                <i class="fa fa-copy mr-2"></i>复制当前数据集
                            </button>
                            <button onclick="deleteCurrentDataset()" 
                                    class="bg-gradient-to-r from-red-500 to-pink-500 text-white py-3 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover">
                                <i class="fa fa-trash mr-2"></i>删除当前数据集
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 导入导出 -->
                <div id="contentImport" class="space-y-6 hidden">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <!-- 导入数据 -->
                        <div class="bg-blue-50 rounded-xl p-6">
                            <h3 class="text-lg font-semibold text-blue-800 mb-4 flex items-center">
                                <i class="fa fa-upload mr-2"></i>导入数据
                            </h3>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-blue-800 mb-2">选择CSV文件</label>
                                    <input type="file" id="importFile" accept=".csv"
                                           class="w-full p-3 border border-blue-200 rounded-lg focus:border-blue-500 focus:outline-none">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-blue-800 mb-2">导入模式</label>
                                    <select id="importMode"
                                            class="w-full p-3 border border-blue-200 rounded-lg focus:border-blue-500 focus:outline-none">
                                        <option value="replace">替换现有数据</option>
                                        <option value="append">追加到现有数据</option>
                                    </select>
                                </div>
                                <button onclick="importCSV()" 
                                        class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-3 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover">
                                    <i class="fa fa-upload mr-2"></i>开始导入
                                </button>
                            </div>
                        </div>

                        <!-- 导出数据 -->
                        <div class="bg-green-50 rounded-xl p-6">
                            <h3 class="text-lg font-semibold text-green-800 mb-4 flex items-center">
                                <i class="fa fa-download mr-2"></i>导出数据
                            </h3>
                            <div class="space-y-4">
                                <button onclick="exportFullDataset()" 
                                        class="w-full bg-gradient-to-r from-green-500 to-emerald-600 text-white py-3 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover">
                                    <i class="fa fa-download mr-2"></i>导出完整数据集
                                </button>
                                <p class="text-sm text-green-700">包含学生信息、出勤状态和配置信息</p>
                                
                                <button onclick="exportAttendanceRecord()" 
                                        class="w-full bg-gradient-to-r from-purple-500 to-pink-600 text-white py-3 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover">
                                    <i class="fa fa-download mr-2"></i>导出出勤记录
                                </button>
                                <p class="text-sm text-purple-700">仅包含学生姓名和出勤状态</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 学生管理 -->
                <div id="contentStudents" class="space-y-6 hidden">
                    <!-- 添加学生 -->
                    <div class="bg-green-50 rounded-xl p-6">
                        <h3 class="text-lg font-semibold text-green-800 mb-4 flex items-center">
                            <i class="fa fa-plus-circle mr-2"></i>添加学生
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-green-800 mb-2">学生姓名</label>
                                <input type="text" id="manageStudentName" placeholder="请输入学生姓名"
                                       class="w-full p-3 border border-green-200 rounded-lg focus:border-green-500 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-green-800 mb-2">初始状态</label>
                                <select id="manageStudentStatus"
                                        class="w-full p-3 border border-green-200 rounded-lg focus:border-green-500 focus:outline-none">
                                    <option value="false">未到</option>
                                    <option value="true">已到</option>
                                </select>
                            </div>
                            <div class="md:col-span-2">
                                <button onclick="manageAddStudent()" 
                                        class="w-full bg-gradient-to-r from-green-500 to-emerald-600 text-white py-3 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover">
                                    <i class="fa fa-save mr-2"></i>添加学生
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 学生列表 -->
                    <div class="bg-white rounded-xl p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                            <i class="fa fa-list mr-2"></i>学生列表管理
                        </h3>
                        <div id="manageStudentList" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 max-h-80 overflow-y-auto">
                            <!-- 学生列表将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 随机点名模态框 -->
    <div id="randomModal" class="fixed inset-0 bg-black bg-opacity-50 modal-backdrop flex items-center justify-center z-50 p-4 hidden">
        <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <!-- 模态框头部 -->
            <div class="bg-gradient-to-r from-primary to-secondary text-white p-6 rounded-t-2xl flex justify-between items-center sticky top-0 z-10">
                <h2 class="text-2xl font-bold flex items-center">
                    <i class="fa fa-random mr-3"></i>随机点名 & 分组
                </h2>
                <button onclick="closeRandomModal()" class="text-white hover:text-gray-200 transition-colors text-2xl btn-hover">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <!-- 模态框内容 -->
            <div class="p-6">
                <div class="flex flex-wrap border-b mb-6">
                    <button onclick="setRandomMode('call')" id="randomModeCall"
                            class="px-6 py-3 border-b-2 font-semibold transition-colors border-primary text-primary btn-hover">
                        随机点名
                    </button>
                    <button onclick="setRandomMode('group')" id="randomModeGroup"
                            class="px-6 py-3 border-b-2 font-semibold transition-colors border-gray-300 text-gray-600 btn-hover">
                        随机分组
                    </button>
                </div>

                <!-- 随机点名 -->
                <div id="randomCallContent" class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">点名人数</label>
                            <input type="number" id="randomCount" min="1" max="34" value="1"
                                   class="w-full p-3 border border-gray-200 rounded-lg focus:border-primary focus:outline-none">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">自动停止时间 (秒)</label>
                            <input type="number" id="stopTime" min="1" max="10" value="3"
                                   class="w-full p-3 border border-gray-200 rounded-lg focus:border-primary focus:outline-none">
                        </div>
                    </div>
                    
                    <div class="text-center p-8 bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl border-2 border-blue-200">
                        <div id="randomNameDisplay" class="text-4xl font-bold text-primary mb-4 animate-pulse">点击开始</div>
                        <div class="text-gray-600">随机点名结果</div>
                    </div>
                    
                    <div class="flex gap-4">
                        <button onclick="startRandomCall()" id="startRandomBtn"
                                class="flex-1 bg-gradient-to-r from-green-500 to-emerald-600 text-white py-3 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover">
                            <i class="fa fa-play mr-2"></i>开始随机
                        </button>
                        <button onclick="stopRandomCall()" id="stopRandomBtn"
                                class="flex-1 bg-gradient-to-r from-red-500 to-pink-500 text-white py-3 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover" disabled>
                            <i class="fa fa-stop mr-2"></i>停止
                        </button>
                    </div>
                    
                    <div id="randomResults" class="space-y-4">
                        <!-- 随机点名结果将显示在这里 -->
                    </div>
                </div>

                <!-- 随机分组 -->
                <div id="randomGroupContent" class="space-y-6 hidden">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">每组人数</label>
                        <input type="number" id="groupSize" min="2" max="20" value="5"
                               class="w-full p-3 border border-gray-200 rounded-lg focus:border-primary focus:outline-none" onchange="updateGroupPreview()">
                    </div>
                    
                    <div class="text-center p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl border-2 border-purple-200">
                        <div class="text-lg font-semibold text-gray-800 mb-2">预计分组</div>
                        <div id="groupPreview" class="text-2xl font-bold text-purple-600">7组 (34人/5人每组)</div>
                    </div>
                    
                    <button onclick="startRandomGroup()"
                            class="w-full bg-gradient-to-r from-purple-500 to-pink-600 text-white py-3 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover">
                        <i class="fa fa-bullseye mr-2"></i>开始分组
                    </button>
                    
                    <div id="groupResults" class="space-y-4">
                        <!-- 分组结果将显示在这里 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 汇总模态框 -->
    <div id="summaryModal" class="fixed inset-0 bg-black bg-opacity-50 modal-backdrop flex items-center justify-center z-50 p-4 hidden">
        <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <!-- 模态框头部 -->
            <div class="bg-gradient-to-r from-success to-emerald-600 text-white p-6 rounded-t-2xl flex justify-between items-center sticky top-0 z-10">
                <h2 class="text-2xl font-bold flex items-center">
                    <i class="fa fa-bar-chart mr-3"></i>点名汇总
                </h2>
                <button onclick="closeSummaryModal()" class="text-white hover:text-gray-200 transition-colors text-2xl btn-hover">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <!-- 模态框内容 -->
            <div class="p-6">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
                    <div class="text-center p-6 bg-blue-100 rounded-xl">
                        <div class="text-3xl font-bold text-blue-600" id="summaryTotal">34</div>
                        <div class="text-sm text-blue-600 mt-1">应到人数</div>
                    </div>
                    <div class="text-center p-6 bg-green-100 rounded-xl">
                        <div class="text-3xl font-bold text-green-600" id="summaryPresent">0</div>
                        <div class="text-sm text-green-600 mt-1">实到人数</div>
                    </div>
                    <div class="text-center p-6 bg-red-100 rounded-xl">
                        <div class="text-3xl font-bold text-red-600" id="summaryAbsent">34</div>
                        <div class="text-sm text-red-600 mt-1">缺勤人数</div>
                    </div>
                    <div class="text-center p-6 bg-purple-100 rounded-xl">
                        <div class="text-3xl font-bold text-purple-600" id="summaryRate">0.0%</div>
                        <div class="text-sm text-purple-600 mt-1">出勤率</div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-green-50 rounded-xl p-6">
                        <h3 class="text-lg font-semibold text-green-800 mb-4 flex items-center">
                            <i class="fa fa-check-circle mr-2"></i>已到学生
                        </h3>
                        <div id="presentList" class="space-y-2 max-h-64 overflow-y-auto">
                            <!-- 已到学生列表将显示在这里 -->
                        </div>
                    </div>
                    
                    <div class="bg-red-50 rounded-xl p-6">
                        <h3 class="text-lg font-semibold text-red-800 mb-4 flex items-center">
                            <i class="fa fa-times-circle mr-2"></i>未到学生
                        </h3>
                        <div id="absentList" class="space-y-2 max-h-64 overflow-y-auto">
                            <!-- 未到学生列表将显示在这里 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加学生模态框 -->
    <div id="addStudentModal" class="fixed inset-0 bg-black bg-opacity-50 modal-backdrop flex items-center justify-center z-50 p-4 hidden">
        <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full">
            <!-- 模态框头部 -->
            <div class="bg-gradient-to-r from-info to-cyan-600 text-white p-6 rounded-t-2xl flex justify-between items-center">
                <h2 class="text-xl font-bold flex items-center">
                    <i class="fa fa-plus mr-3"></i>添加学生
                </h2>
                <button onclick="closeAddStudentModal()" class="text-white hover:text-gray-200 transition-colors text-2xl btn-hover">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <!-- 模态框内容 -->
            <div class="p-6">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">学生姓名</label>
                        <input type="text" id="newStudentName" placeholder="请输入学生姓名"
                               class="w-full p-3 border border-gray-200 rounded-lg focus:border-info focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">初始状态</label>
                        <select id="newStudentStatus"
                                class="w-full p-3 border border-gray-200 rounded-lg focus:border-info focus:outline-none">
                            <option value="false">未到</option>
                            <option value="true">已到</option>
                        </select>
                    </div>
                    <button onclick="addStudent()" 
                            class="w-full bg-gradient-to-r from-info to-cyan-600 text-white py-3 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover">
                        <i class="fa fa-save mr-2"></i>添加学生
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑学生模态框 -->
    <div id="editStudentModal" class="fixed inset-0 bg-black bg-opacity-50 modal-backdrop flex items-center justify-center z-50 p-4 hidden">
        <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full">
            <!-- 模态框头部 -->
            <div class="bg-gradient-to-r from-warning to-orange-500 text-white p-6 rounded-t-2xl flex justify-between items-center">
                <h2 class="text-xl font-bold flex items-center">
                    <i class="fa fa-edit mr-3"></i>编辑学生
                </h2>
                <button onclick="closeEditStudentModal()" class="text-white hover:text-gray-200 transition-colors text-2xl btn-hover">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <!-- 模态框内容 -->
            <div class="p-6">
                <div class="space-y-4">
                    <input type="hidden" id="editStudentId">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">学生姓名</label>
                        <input type="text" id="editStudentName" placeholder="请输入学生姓名"
                               class="w-full p-3 border border-gray-200 rounded-lg focus:border-warning focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">出勤状态</label>
                        <select id="editStudentStatus"
                                class="w-full p-3 border border-gray-200 rounded-lg focus:border-warning focus:outline-none">
                            <option value="false">未到</option>
                            <option value="true">已到</option>
                        </select>
                    </div>
                    <button onclick="updateStudent()" 
                            class="w-full bg-gradient-to-r from-warning to-orange-500 text-white py-3 px-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 btn-hover">
                        <i class="fa fa-save mr-2"></i>保存修改
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let currentDataset = 'default';
        let datasets = {};
        let currentFilter = 'all';
        let randomInterval = null;
        let randomResults = [];
        let randomGroups = [];

        // 示例学生数据
        const sampleStudents = [
            { id: '1', name: '谢莹', present: false },
            { id: '2', name: '吕玉娟', present: false },
            { id: '3', name: '易潇', present: false },
            { id: '4', name: '高浩轩', present: false },
            { id: '5', name: '余艳鹏', present: false },
            { id: '6', name: '刘川宇', present: false },
            { id: '7', name: '黄轩源', present: false },
            { id: '8', name: '王彬宇', present: false },
            { id: '9', name: '李浩', present: false },
            { id: '10', name: '周文杰', present: false },
            { id: '11', name: '邓学文', present: false },
            { id: '12', name: '雷佳俊', present: false },
            { id: '13', name: '李斌', present: false },
            { id: '14', name: '罗文彬', present: false },
            { id: '15', name: '曾羽华', present: false },
            { id: '16', name: '冯云龙', present: false },
            { id: '17', name: '张梓涵', present: false },
            { id: '18', name: '刘成硕', present: false },
            { id: '19', name: '邹广明', present: false },
            { id: '20', name: '刘诚', present: false },
            { id: '21', name: '彭浩', present: false },
            { id: '22', name: '何锦阳', present: false },
            { id: '23', name: '段俊鹏', present: false },
            { id: '24', name: '刘洋铭', present: false },
            { id: '25', name: '邓韩冰', present: false },
            { id: '26', name: '周宇勋', present: false },
            { id: '27', name: '李新波', present: false },
            { id: '28', name: '庄宁健', present: false },
            { id: '29', name: '蒋靖', present: false },
            { id: '30', name: '朱志强', present: false },
            { id: '31', name: '王建', present: false },
            { id: '32', name: '吴中诚', present: false },
            { id: '33', name: '谌湘泉', present: false },
            { id: '34', name: '唐国盛', present: false }
        ];

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            initializeData();
            updateTime();
            setInterval(updateTime, 1000);
            renderStudentList();
            updateStats();
            updateDatasetList();
        });

        // 初始化数据
        function initializeData() {
            const savedData = localStorage.getItem('attendanceDatasets');
            if (savedData) {
                datasets = JSON.parse(savedData);
            } else {
                datasets = {
                    'default': {
                        title: '机械工程学院 机自25-5BF',
                        scene: 'class',
                        college: '机械工程学院',
                        classCourse: '机自25-5BF',
                        termTime: '2024-2025学年第一学期',
                        students: [...sampleStudents],
                        lastUpdated: new Date().toISOString()
                    }
                };
                saveDatasets();
            }
            
            // 更新数据集选择器
            const select = document.getElementById('datasetSelect');
            select.innerHTML = '';
            Object.keys(datasets).forEach(key => {
                const option = document.createElement('option');
                option.value = key;
                option.textContent = datasets[key].title;
                if (key === currentDataset) {
                    option.selected = true;
                }
                select.appendChild(option);
            });
        }

        // 保存数据集
        function saveDatasets() {
            localStorage.setItem('attendanceDatasets', JSON.stringify(datasets));
        }

        // 更新时间
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            document.getElementById('currentTime').textContent = timeString;
        }

        // 渲染学生列表
        function renderStudentList() {
            const studentList = document.getElementById('studentList');
            const students = datasets[currentDataset].students;
            
            studentList.innerHTML = '';
            
            students.forEach(student => {
                if (currentFilter === 'present' && !student.present) return;
                if (currentFilter === 'absent' && student.present) return;
                
                const studentCard = createStudentCard(student);
                studentList.appendChild(studentCard);
            });
        }

        // 创建学生卡片
        function createStudentCard(student) {
            const card = document.createElement('div');
            card.className = `bg-white rounded-xl shadow-md p-4 border-2 transition-all duration-300 cursor-pointer card-hover ${
                student.present ? 'border-green-500 bg-green-50' : 'border-red-500 bg-red-50'
            }`;
            
            card.innerHTML = `
                <div class="flex justify-between items-start">
                    <div class="text-center flex-1">
                        <div class="w-12 h-12 rounded-full mx-auto mb-3 flex items-center justify-center text-white font-bold text-lg ${
                            student.present ? 'bg-green-500' : 'bg-red-500'
                        }">
                            ${student.name.charAt(0)}
                        </div>
                        <div class="font-semibold text-gray-800">${student.name}</div>
                        <div class="text-xs text-gray-600 mt-1">${student.present ? '已到' : '点击签到'}</div>
                    </div>
                    <div class="flex flex-col space-y-1 ml-2">
                        <button onclick="event.stopPropagation(); editStudent('${student.id}')" 
                                class="p-1.5 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors btn-hover">
                            <i class="fa fa-edit text-xs"></i>
                        </button>
                        <button onclick="event.stopPropagation(); deleteStudent('${student.id}')" 
                                class="p-1.5 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors btn-hover">
                            <i class="fa fa-times text-xs"></i>
                        </button>
                    </div>
                </div>
            `;
            
            card.onclick = () => toggleStudentStatus(student.id);
            return card;
        }

        // 切换学生状态
        function toggleStudentStatus(studentId) {
            const students = datasets[currentDataset].students;
            const student = students.find(s => s.id === studentId);
            if (student) {
                student.present = !student.present;
                saveDatasets();
                renderStudentList();
                updateStats();
                updateManageStudentList();
            }
        }

        // 编辑学生
        function editStudent(studentId) {
            const students = datasets[currentDataset].students;
            const student = students.find(s => s.id === studentId);
            if (student) {
                document.getElementById('editStudentId').value = student.id;
                document.getElementById('editStudentName').value = student.name;
                document.getElementById('editStudentStatus').value = student.present.toString();
                document.getElementById('editStudentModal').classList.remove('hidden');
            }
        }

        // 更新学生信息
        function updateStudent() {
            const studentId = document.getElementById('editStudentId').value;
            const newName = document.getElementById('editStudentName').value.trim();
            const newStatus = document.getElementById('editStudentStatus').value === 'true';
            
            if (!newName) {
                alert('请输入学生姓名');
                return;
            }
            
            const students = datasets[currentDataset].students;
            const student = students.find(s => s.id === studentId);
            if (student) {
                student.name = newName;
                student.present = newStatus;
                saveDatasets();
                renderStudentList();
                updateStats();
                updateManageStudentList();
                closeEditStudentModal();
                showNotification('学生信息更新成功！', 'success');
            }
        }

        // 删除学生
        function deleteStudent(studentId) {
            if (confirm('确定要删除这名学生吗？')) {
                const students = datasets[currentDataset].students;
                const index = students.findIndex(s => s.id === studentId);
                if (index !== -1) {
                    students.splice(index, 1);
                    saveDatasets();
                    renderStudentList();
                    updateStats();
                    updateManageStudentList();
                    showNotification('学生删除成功！', 'success');
                }
            }
        }

        // 更新统计信息
        function updateStats() {
            const students = datasets[currentDataset].students;
            const total = students.length;
            const present = students.filter(s => s.present).length;
            const absent = total - present;
            const rate = total > 0 ? ((present / total) * 100).toFixed(1) : '0.0';
            
            document.getElementById('totalCount').textContent = total;
            document.getElementById('presentCount').textContent = present;
            document.getElementById('absentCount').textContent = absent;
            document.getElementById('attendanceRate').textContent = rate + '%';
            
            // 更新页面标题
            const dataset = datasets[currentDataset];
            document.getElementById('title').textContent = dataset.title;
            document.getElementById('subtitle').textContent = 
                dataset.scene === 'class' ? `${dataset.college} ${dataset.classCourse}` : `${dataset.termTime} ${dataset.classCourse}`;
        }

        // 设置筛选
        function setFilter(filter) {
            currentFilter = filter;
            
            // 更新筛选按钮状态
            document.getElementById('filterAll').className = filter === 'all' 
                ? 'py-2 px-3 rounded-lg font-medium transition-colors bg-primary text-white btn-hover'
                : 'py-2 px-3 rounded-lg font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200 btn-hover';
            
            document.getElementById('filterPresent').className = filter === 'present'
                ? 'py-2 px-3 rounded-lg font-medium transition-colors bg-primary text-white btn-hover'
                : 'py-2 px-3 rounded-lg font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200 btn-hover';
            
            document.getElementById('filterAbsent').className = filter === 'absent'
                ? 'py-2 px-3 rounded-lg font-medium transition-colors bg-primary text-white btn-hover'
                : 'py-2 px-3 rounded-lg font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200 btn-hover';
            
            renderStudentList();
        }

        // 模态框控制函数
        function showManagementModal() {
            document.getElementById('managementModal').classList.remove('hidden');
            setActiveTab('dataset');
        }

        function hideManagementModal() {
            document.getElementById('managementModal').classList.add('hidden');
        }

        function showRandomModal() {
            document.getElementById('randomModal').classList.remove('hidden');
            setRandomMode('call');
            updateGroupPreview();
        }

        function closeRandomModal() {
            document.getElementById('randomModal').classList.add('hidden');
            stopRandomCall();
        }

        function showSummaryModal() {
            document.getElementById('summaryModal').classList.remove('hidden');
            updateSummary();
        }

        function closeSummaryModal() {
            document.getElementById('summaryModal').classList.add('hidden');
        }

        function showAddStudentModal() {
            document.getElementById('addStudentModal').classList.remove('hidden');
            document.getElementById('newStudentName').focus();
        }

        function closeAddStudentModal() {
            document.getElementById('addStudentModal').classList.add('hidden');
            document.getElementById('newStudentName').value = '';
        }

        function closeEditStudentModal() {
            document.getElementById('editStudentModal').classList.add('hidden');
        }

        // 管理中心标签页
        function setActiveTab(tab) {
            // 更新标签页状态
            document.getElementById('tabDataset').className = tab === 'dataset'
                ? 'px-6 py-3 border-b-2 font-semibold transition-colors border-primary text-primary btn-hover'
                : 'px-6 py-3 border-b-2 font-semibold transition-colors border-gray-300 text-gray-600 btn-hover';
            
            document.getElementById('tabImport').className = tab === 'import'
                ? 'px-6 py-3 border-b-2 font-semibold transition-colors border-primary text-primary btn-hover'
                : 'px-6 py-3 border-b-2 font-semibold transition-colors border-gray-300 text-gray-600 btn-hover';
            
            document.getElementById('tabStudents').className = tab === 'students'
                ? 'px-6 py-3 border-b-2 font-semibold transition-colors border-primary text-primary btn-hover'
                : 'px-6 py-3 border-b-2 font-semibold transition-colors border-gray-300 text-gray-600 btn-hover';
            
            // 显示对应内容
            document.getElementById('contentDataset').classList.toggle('hidden', tab !== 'dataset');
            document.getElementById('contentImport').classList.toggle('hidden', tab !== 'import');
            document.getElementById('contentStudents').classList.toggle('hidden', tab !== 'students');
            
            if (tab === 'students') {
                updateManageStudentList();
            }
        }

        // 更新数据集表单
        function updateDatasetForm() {
            const scene = document.getElementById('newDatasetScene').value;
            if (scene === 'class') {
                document.getElementById('classFields').classList.remove('hidden');
                document.getElementById('courseFields').classList.add('hidden');
            } else {
                document.getElementById('classFields').classList.add('hidden');
                document.getElementById('courseFields').classList.remove('hidden');
            }
        }

        // 创建新数据集
        function createNewDataset() {
            const title = document.getElementById('newDatasetTitle').value.trim();
            const scene = document.getElementById('newDatasetScene').value;
            
            if (!title) {
                alert('请输入点名标题');
                return;
            }
            
            const newId = Date.now().toString();
            const newDataset = {
                title: title,
                scene: scene,
                college: scene === 'class' ? document.getElementById('newDatasetCollege').value.trim() : '',
                classCourse: scene === 'class' ? document.getElementById('newDatasetClass').value.trim() : document.getElementById('newDatasetCourse').value.trim(),
                termTime: scene === 'course' ? document.getElementById('newDatasetTerm').value.trim() : '',
                students: [],
                lastUpdated: new Date().toISOString()
            };
            
            datasets[newId] = newDataset;
            saveDatasets();
            updateDatasetList();
            
            // 重置表单
            document.getElementById('newDatasetTitle').value = '';
            document.getElementById('newDatasetCollege').value = '';
            document.getElementById('newDatasetClass').value = '';
            document.getElementById('newDatasetTerm').value = '';
            document.getElementById('newDatasetCourse').value = '';
            
            showNotification('数据集创建成功！', 'success');
        }

        // 更新数据集列表
        function updateDatasetList() {
            const datasetList = document.getElementById('datasetList');
            datasetList.innerHTML = '';
            
            Object.keys(datasets).forEach(key => {
                const dataset = datasets[key];
                const datasetItem = document.createElement('div');
                datasetItem.className = `border-2 rounded-lg p-4 cursor-pointer hover:shadow-md transition-all ${
                    key === currentDataset ? 'border-primary bg-white' : 'border-gray-200 bg-white'
                }`;
                datasetItem.onclick = () => switchDataset(key);
                
                datasetItem.innerHTML = `
                    <div class="font-semibold text-gray-800">${dataset.title}</div>
                    <div class="text-sm text-gray-600">${dataset.scene === 'class' ? '班级点名' : '课程点名'}</div>
                    <div class="text-xs text-gray-500 mt-1">学生: ${dataset.students.length}人</div>
                `;
                
                datasetList.appendChild(datasetItem);
            });
        }

        // 切换数据集
        function switchDataset(datasetId) {
            currentDataset = datasetId;
            saveDatasets();
            renderStudentList();
            updateStats();
            updateDatasetList();
            
            // 更新数据集选择器
            const select = document.getElementById('datasetSelect');
            select.value = datasetId;
            
            showNotification('已切换到 ' + datasets[datasetId].title, 'info');
        }

        // 复制当前数据集
        function duplicateCurrentDataset() {
            const currentData = datasets[currentDataset];
            const newId = Date.now().toString();
            const newDataset = {
                ...currentData,
                title: currentData.title + ' (副本)',
                students: JSON.parse(JSON.stringify(currentData.students)),
                lastUpdated: new Date().toISOString()
            };
            
            datasets[newId] = newDataset;
            saveDatasets();
            updateDatasetList();
            showNotification('数据集复制成功！', 'success');
        }

        // 删除当前数据集
        function deleteCurrentDataset() {
            if (Object.keys(datasets).length <= 1) {
                alert('至少需要保留一个数据集');
                return;
            }
            
            if (confirm('确定要删除当前数据集吗？此操作不可撤销！')) {
                const datasetTitle = datasets[currentDataset].title;
                delete datasets[currentDataset];
                
                // 切换到第一个数据集
                const remainingKeys = Object.keys(datasets);
                currentDataset = remainingKeys[0];
                
                saveDatasets();
                renderStudentList();
                updateStats();
                updateDatasetList();
                
                // 更新数据集选择器
                const select = document.getElementById('datasetSelect');
                select.value = currentDataset;
                
                showNotification('数据集删除成功！', 'success');
            }
        }

        // 添加学生
        function addStudent() {
            const name = document.getElementById('newStudentName').value.trim();
            const present = document.getElementById('newStudentStatus').value === 'true';
            
            if (!name) {
                alert('请输入学生姓名');
                return;
            }
            
            const students = datasets[currentDataset].students;
            const newId = Date.now().toString();
            
            students.push({
                id: newId,
                name: name,
                present: present
            });
            
            saveDatasets();
            renderStudentList();
            updateStats();
            updateManageStudentList();
            
            document.getElementById('newStudentName').value = '';
            document.getElementById('newStudentName').focus();
            
            showNotification('学生添加成功！', 'success');
        }

        // 管理页面添加学生
        function manageAddStudent() {
            const name = document.getElementById('manageStudentName').value.trim();
            const present = document.getElementById('manageStudentStatus').value === 'true';
            
            if (!name) {
                alert('请输入学生姓名');
                return;
            }
            
            const students = datasets[currentDataset].students;
            const newId = Date.now().toString();
            
            students.push({
                id: newId,
                name: name,
                present: present
            });
            
            saveDatasets();
            renderStudentList();
            updateStats();
            updateManageStudentList();
            
            document.getElementById('manageStudentName').value = '';
            document.getElementById('manageStudentName').focus();
            
            showNotification('学生添加成功！', 'success');
        }

        // 更新管理页面学生列表
        function updateManageStudentList() {
            const studentList = document.getElementById('manageStudentList');
            const students = datasets[currentDataset].students;
            
            studentList.innerHTML = '';
            
            students.forEach(student => {
                const studentItem = document.createElement('div');
                studentItem.className = `bg-white rounded-lg p-3 border-2 transition-all duration-300 cursor-pointer ${
                    student.present ? 'border-green-500 bg-green-50' : 'border-red-500 bg-red-50'
                }`;
                
                studentItem.innerHTML = `
                    <div class="flex justify-between items-center">
                        <div class="text-center flex-1">
                            <div class="font-semibold text-gray-800 text-sm">${student.name}</div>
                            <div class="text-xs text-gray-600 mt-1">${student.present ? '已到' : '未到'}</div>
                        </div>
                        <div class="flex flex-col space-y-1 ml-2">
                            <button onclick="event.stopPropagation(); editStudent('${student.id}')" 
                                    class="p-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors btn-hover">
                                <i class="fa fa-edit text-xs"></i>
                            </button>
                            <button onclick="event.stopPropagation(); deleteStudent('${student.id}')" 
                                    class="p-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors btn-hover">
                                <i class="fa fa-times text-xs"></i>
                            </button>
                        </div>
                    </div>
                `;
                
                studentItem.onclick = () => toggleStudentStatus(student.id);
                studentList.appendChild(studentItem);
            });
        }

        // 随机点名功能
        function setRandomMode(mode) {
            // 更新模式按钮状态
            document.getElementById('randomModeCall').className = mode === 'call'
                ? 'px-6 py-3 border-b-2 font-semibold transition-colors border-primary text-primary btn-hover'
                : 'px-6 py-3 border-b-2 font-semibold transition-colors border-gray-300 text-gray-600 btn-hover';
            
            document.getElementById('randomModeGroup').className = mode === 'group'
                ? 'px-6 py-3 border-b-2 font-semibold transition-colors border-primary text-primary btn-hover'
                : 'px-6 py-3 border-b-2 font-semibold transition-colors border-gray-300 text-gray-600 btn-hover';
            
            // 显示对应内容
            document.getElementById('randomCallContent').classList.toggle('hidden', mode !== 'call');
            document.getElementById('randomGroupContent').classList.toggle('hidden', mode !== 'group');
        }

        function startRandomCall() {
            const count = parseInt(document.getElementById('randomCount').value);
            const stopTime = parseInt(document.getElementById('stopTime').value) * 1000;
            const students = datasets[currentDataset].students;
            
            if (count < 1 || count > students.length) {
                alert('请输入有效的点名人数');
                return;
            }
            
            document.getElementById('startRandomBtn').disabled = true;
            document.getElementById('stopRandomBtn').disabled = false;
            
            const randomNameDisplay = document.getElementById('randomNameDisplay');
            randomResults = [];
            
            // 开始随机滚动名字
            randomInterval = setInterval(() => {
                const randomIndex = Math.floor(Math.random() * students.length);
                randomNameDisplay.textContent = students[randomIndex].name;
                randomNameDisplay.className = 'text-4xl font-bold text-primary mb-4 animate-glow';
            }, 100);
            
            // 自动停止
            setTimeout(() => {
                stopRandomCall();
            }, stopTime);
        }

        function stopRandomCall() {
            if (randomInterval) {
                clearInterval(randomInterval);
                randomInterval = null;
            }
            
            document.getElementById('startRandomBtn').disabled = false;
            document.getElementById('stopRandomBtn').disabled = true;
            
            const count = parseInt(document.getElementById('randomCount').value);
            const students = datasets[currentDataset].students;
            const selectedStudents = [];
            
            // 选择不重复的学生
            while (selectedStudents.length < count && selectedStudents.length < students.length) {
                const randomIndex = Math.floor(Math.random() * students.length);
                const student = students[randomIndex];
                if (!selectedStudents.find(s => s.id === student.id)) {
                    selectedStudents.push(student);
                }
            }
            
            randomResults = selectedStudents;
            
            // 更新显示
            const randomNameDisplay = document.getElementById('randomNameDisplay');
            if (selectedStudents.length > 0) {
                randomNameDisplay.textContent = selectedStudents[0].name;
            }
            randomNameDisplay.className = 'text-4xl font-bold text-primary mb-4';
            
            // 显示结果
            const resultsDiv = document.getElementById('randomResults');
            resultsDiv.innerHTML = '<h4 class="font-semibold text-gray-800 mb-3">点名结果：</h4>';
            
            selectedStudents.forEach(student => {
                const resultTag = document.createElement('span');
                resultTag.className = `inline-block bg-blue-500 text-white px-4 py-2 rounded-full text-sm mr-2 mb-2 animate-float`;
                resultTag.textContent = student.name;
                resultsDiv.appendChild(resultTag);
            });
        }

        // 随机分组功能
        function updateGroupPreview() {
            const groupSize = parseInt(document.getElementById('groupSize').value);
            const totalStudents = datasets[currentDataset].students.length;
            const groupCount = Math.ceil(totalStudents / groupSize);
            
            document.getElementById('groupPreview').textContent = 
                `${groupCount}组 (${totalStudents}人/${groupSize}人每组)`;
        }

        function startRandomGroup() {
            const groupSize = parseInt(document.getElementById('groupSize').value);
            const students = datasets[currentDataset].students;
            
            if (groupSize < 2 || groupSize > students.length) {
                alert('请输入有效的每组人数');
                return;
            }
            
            // 洗牌算法
            const shuffledStudents = [...students].sort(() => Math.random() - 0.5);
            const groups = [];
            
            // 分组
            for (let i = 0; i < shuffledStudents.length; i += groupSize) {
                groups.push(shuffledStudents.slice(i, i + groupSize));
            }
            
            randomGroups = groups;
            renderGroups();
        }

        function renderGroups() {
            const resultsDiv = document.getElementById('groupResults');
            resultsDiv.innerHTML = '';
            
            randomGroups.forEach((group, index) => {
                const groupDiv = document.createElement('div');
                groupDiv.className = 'bg-white rounded-xl shadow-md p-4 border-2 border-purple-200 mb-4';
                groupDiv.innerHTML = `<h4 class="font-semibold text-gray-800 mb-3 flex items-center">
                    <i class="fa fa-users mr-2 text-purple-600"></i>
                    第${index + 1}组 (${group.length}人)
                </h4>`;
                
                const studentsDiv = document.createElement('div');
                studentsDiv.className = 'flex flex-wrap gap-2';
                
                group.forEach(student => {
                    const studentTag = document.createElement('span');
                    studentTag.className = `inline-block px-3 py-1 rounded-full text-sm ${
                        student.present ? 'bg-green-500 text-white' : 'bg-red-500 text-white'
                    }`;
                    studentTag.textContent = student.name;
                    studentsDiv.appendChild(studentTag);
                });
                
                groupDiv.appendChild(studentsDiv);
                resultsDiv.appendChild(groupDiv);
            });
        }

        // 汇总功能
        function updateSummary() {
            const students = datasets[currentDataset].students;
            const presentStudents = students.filter(s => s.present);
            const absentStudents = students.filter(s => !s.present);
            
            // 更新统计数字
            document.getElementById('summaryTotal').textContent = students.length;
            document.getElementById('summaryPresent').textContent = presentStudents.length;
            document.getElementById('summaryAbsent').textContent = absentStudents.length;
            document.getElementById('summaryRate').textContent = 
                students.length > 0 ? ((presentStudents.length / students.length) * 100).toFixed(1) + '%' : '0.0%';
            
            // 更新学生列表
            const presentList = document.getElementById('presentList');
            const absentList = document.getElementById('absentList');
            
            presentList.innerHTML = presentStudents.map(student => 
                `<div class="flex items-center justify-between p-2 bg-green-100 rounded-lg">
                    <span class="text-green-800 text-sm">${student.name}</span>
                    <i class="fa fa-check-circle text-green-500"></i>
                </div>`
            ).join('');
            
            absentList.innerHTML = absentStudents.map(student => 
                `<div class="flex items-center justify-between p-2 bg-red-100 rounded-lg">
                    <span class="text-red-800 text-sm">${student.name}</span>
                    <i class="fa fa-times-circle text-red-500"></i>
                </div>`
            ).join('');
        }

        // 导入导出功能
        function importCSV() {
            const fileInput = document.getElementById('importFile');
            const importMode = document.getElementById('importMode').value;
            
            if (!fileInput.files || fileInput.files.length === 0) {
                alert('请选择CSV文件');
                return;
            }
            
            const file = fileInput.files[0];
            const reader = new FileReader();
            
            reader.onload = function(e) {
                try {
                    const content = e.target.result;
                    const lines = content.split('\n');
                    const newStudents = [];
                    
                    for (let i = 0; i < lines.length; i++) {
                        const line = lines[i].trim();
                        if (!line) continue;
                        
                        // 跳过标题行
                        if (i === 0 && (line.includes('姓名') || line.includes('name'))) {
                            continue;
                        }
                        
                        const parts = line.split(',').map(p => p.trim().replace(/^"/, '').replace(/"$/, ''));
                        const name = parts[0];
                        
                        if (name && name.length > 0) {
                            newStudents.push({
                                id: Date.now().toString() + '_' + i,
                                name: name,
                                present: false
                            });
                        }
                    }
                    
                    if (newStudents.length === 0) {
                        alert('未找到有效的学生数据');
                        return;
                    }
                    
                    const students = datasets[currentDataset].students;
                    
                    if (importMode === 'replace') {
                        datasets[currentDataset].students = newStudents;
                    } else {
                        // 追加模式，避免重复
                        const existingNames = new Set(students.map(s => s.name));
                        const uniqueStudents = newStudents.filter(s => !existingNames.has(s.name));
                        datasets[currentDataset].students.push(...uniqueStudents);
                    }
                    
                    saveDatasets();
                    renderStudentList();
                    updateStats();
                    updateManageStudentList();
                    
                    fileInput.value = '';
                    showNotification(`成功导入 ${newStudents.length} 名学生！`, 'success');
                } catch (error) {
                    alert('导入失败：' + error.message);
                }
            };
            
            reader.readAsText(file, 'UTF-8');
        }

        function exportCSV() {
            exportAttendanceRecord();
        }

        function exportFullDataset() {
            const dataset = datasets[currentDataset];
            const content = JSON.stringify(dataset, null, 2);
            
            const blob = new Blob([content], { type: 'application/json;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = `${dataset.title}_完整数据集.json`;
            link.click();
            URL.revokeObjectURL(url);
            
            showNotification('完整数据集导出成功！', 'success');
        }

        function exportAttendanceRecord() {
            const students = datasets[currentDataset].students;
            const dataset = datasets[currentDataset];
            
            let csvContent = '';
            
            // 根据场景添加不同的头部信息
            if (dataset.scene === 'class') {
                csvContent += `学院,${dataset.college}\n`;
                csvContent += `班级,${dataset.classCourse}\n`;
            } else {
                csvContent += `学期,${dataset.termTime}\n`;
                csvContent += `课程,${dataset.classCourse}\n`;
            }
            
            csvContent += `点名时间,${new Date().toLocaleString()}\n`;
            csvContent += `应到人数,${students.length}\n`;
            csvContent += `实到人数,${students.filter(s => s.present).length}\n`;
            csvContent += `缺勤人数,${students.filter(s => !s.present).length}\n`;
            csvContent += `出勤率,${students.length > 0 ? ((students.filter(s => s.present).length / students.length) * 100).toFixed(1) + '%' : '0.0%'}\n\n`;
            
            csvContent += '序号,学生姓名,出勤状态\n';
            
            students.forEach((student, index) => {
                csvContent += `${index + 1},${student.name},${student.present ? '已到' : '未到'}\n`;
            });
            
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            
            // 根据场景生成不同的文件名
            let fileName;
            if (dataset.scene === 'class') {
                fileName = `${dataset.classCourse}_班级点名记录_${new Date().toLocaleDateString()}.csv`;
            } else {
                fileName = `${dataset.classCourse}_课程点名记录_${new Date().toLocaleDateString()}.csv`;
            }
            
            link.download = fileName;
            link.click();
            URL.revokeObjectURL(url);
            
            showNotification('出勤记录导出成功！', 'success');
        }

        // 显示通知
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg text-white transform translate-x-full transition-transform duration-300 ${
                type === 'success' ? 'bg-green-500' :
                type === 'error' ? 'bg-red-500' :
                type === 'warning' ? 'bg-yellow-500' : 'bg-blue-500'
            }`;
            
            notification.innerHTML = `
                <div class="flex items-center">
                    <i class="fa fa-${type === 'success' ? 'check' : type === 'error' ? 'times' : type === 'warning' ? 'exclamation' : 'info'}-circle mr-2"></i>
                    <span>${message}</span>
                </div>
            `;
            
            document.body.appendChild(notification);
            
            // 显示通知
            setTimeout(() => {
                notification.classList.remove('translate-x-full');
            }, 100);
            
            // 自动隐藏
            setTimeout(() => {
                notification.classList.add('translate-x-full');
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        // 键盘快捷键
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                // ESC键关闭所有模态框
                hideManagementModal();
                closeRandomModal();
                closeSummaryModal();
                closeAddStudentModal();
                closeEditStudentModal();
            }
        });
    </script>
</body>
</html>